<template>
  <div class="main">
    <div class="list">
      <div v-for="item, index in ContentList" :key="index" class="content">
        <img :src="item.pic" alt="">
        <div class="list-content">
          <p>{{ item.title }}</p>
          <h3><span>￥</span>{{ item.price }} <s class="span2" v-show="item.old_price"><span>￥</span>{{ item.old_price
          }}</s><i class="iconfont">&#xe615;</i></h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  props: {
    ContentList: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 0 10px;
  margin-top: 120px;
  background-color: #f8f8f8;
  margin-bottom: 50px;
}


.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
  justify-content: flex-start; // 替代原先的space-between布局方式

  .content {
    flex: 1;
    margin: 0 10px 10px 0; // 间隙为5px
    background-color: #fff;
    width: calc((100% - 10px) / 2); // 这里的10px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了


    &:nth-child(2n) {
      // 去除第2n个的margin-right
      margin-right: 0;
    }

    .list-content {
      width: 153px;
      height: 55px;
      padding: 0 10px;

      p,
      h3 {
        font-size: 16px;
        color: #585858;
        // 超出部分用'...'显示
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }


      h3 {
        color: #b90d27;
        margin-top: 5px;

        span {
          font-size: 14px;
          font-weight: 400;
        }

        i {
          float: right;
          color: #949494;
          line-height: 25px;
        }

        .span2 {
          color: #939393;
          font-size: 8px;

          span {
            font-size: 8px;
          }
        }
      }
    }

    img {
      width: 173px;
      height: 189px;
    }
  }
}
</style>